import React from 'react';
import { inject, observer } from 'mobx-react';
import { Row, Col, Button, Image, message } from 'antd';
import { PlusCircleFilled } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import './index.less';
import '@/utils/polify';
const ipcRenderer = window.require('electron').ipcRenderer;

@inject('store')
@observer
class Initial extends React.Component {
  componentDidMount() {
    ipcRenderer.on('create-finish', (event, result) => {
      console.log('【create】finish', result);
      const { data, success } = result;
      data.pages = [];
      if (success) {
        this.props.store.project.projects = this.props.store.project.projects || [];
        this.props.store.project.projects.push(data);
      } else {
        message.success({
          content: 'This is a prompt message with custom className and style',
          className: 'custom-class',
          style: {
            marginTop: '20vh',
          },
        });
      }
    });
  }
  createProject() {
    // console.log('1');
    // this.props.store.system.addProject({
    //   appid: 'wx19c7fa71f7b7064d',
    //   cover: 'https://pubimg.xingren.com/90143fcc-5622-49d8-b681-11d9432189d5.png',
    //   libVersion: '2.12.0',
    //   path: '/Users/junyitan/Desktop/doctorwork/iPenguinDoctor_qa/dist',
    //   projectName: 'iDoctor',
    // });

    ipcRenderer.send('create-project');
  }

  goProjectDetail(index) {
    this.props.store.project.projectActive = index;
    this.props.history.push('/project');
  }

  render() {
    const { projects = [] } = this.props.store.project;
    return (
      <div className="initial">
        <Row className="constainer">
          <Col span={8}>
            <PlusCircleFilled className="project" onClick={this.createProject.bind(this)} />
          </Col>
          {projects.map((project, index) => (
            <Col span={8} key={index}>
              <Row className="project" onClick={() => this.goProjectDetail(index)}>
                <Image src={project.cover} disabled onClick={() => {}}></Image>
                <div className="name">{project.projectName}</div>
                <div className="name">{project.appid}</div>
              </Row>
            </Col>
          ))}
        </Row>
      </div>
    );
  }
}

export default Initial;
